<!--  -->
<template>
  <el-header height="42px" :style="{width:'100%'}">

    <span class="ik-list-title">
      <span class="svg-container ik-list-icon">
        <svg-icon icon-class="database" />
      </span>
      {{ title }}
    </span>
    <el-button-group class="reportMenuButton">
      <template v-for="(i,index) in buttonlist">
        <el-button v-if="gongneng.includes(i.btnTitle) && !tanChuang.includes(i.btnTitle)" :key="i.btnTitle" :class="{fbutton: index==0,lbutton:index == buttonlist.length-1}" :disabled="isDisabled(i.btnTitle)" class="button" size="medium" @click="change(i.btnEvent)">{{ i.btnTitle }}</el-button>
        <el-popconfirm
          v-if="gongneng.includes(i.btnTitle) && tanChuang.includes(i.btnTitle)"
          :key="i.btnTitle"

          :title="`确认${i.btnTitle}吗?`"
          @confirm="change(i.btnEvent)"
        >
          <el-button slot="reference" :class="{fbutton: index==0,lbutton:index == buttonlist.length-1}" class="button" size="medium">{{ i.btnTitle }}</el-button>
        </el-popconfirm>
      </template>

      <!-- <el-button v-if="gongneng.includes('返回')" class="button" size="medium" @click="change('back')">返回</el-button> -->
    </el-button-group>

  </el-header>
</template>

<script>

export default {
// import引入的组件需要注入到对象中才能使用
  name: 'MenuButton',
  components: {},
  props: {
    buttonlist: {
      type: Array,
      default: function() {
        return {}
      }

    },
    title: {
      type: String,
      default: '数据列表'
    },
    // 功能列表
    gongneng: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 弹窗按钮列表
    tanChuang: {
      type: Array,
      default: () => {
        return []
      }
    },
    nowStatus: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  },
  computed: {},
  watch: {
  },
  created() {

  },
  mounted() {

  },

  methods: {
    change(btnEvent) {
      this.$emit('buttonclickchange', btnEvent)
    },
    isDisabled(name) {
      if (this.nowStatus === '详情') {
        return this.detailShow(name)
      }
      if (this.nowStatus === '编辑') {
        return this.addShow(name)
      }
      if (this.nowStatus === '新增') {
        return this.addShow(name)
      }
    },
    detailShow(name) {
      const data = ['新增', '修改', '复制']
      return !data.includes(name)
    },
    addShow(name) {
      const data = ['保存', '取消']
      return !data.includes(name)
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep.reportMenuButton{
  display: flex;
  position: absolute;
  right: 10px;
  top: 3px;
  .el-button.is-disabled{
    background-color: #AAAAAA;
    color: white;
  }
  .fbutton{
    border-radius: 25px 0 0 25px;
  }
  .lbutton{
    border-radius:  0 25px 25px 0 ;
  }
}
.el-button-group>.el-button:first-child{
  border-radius: 25px 0 0 25px;
}
.el-button-group>.el-button:last-child{
  border-radius:  0 25px 25px 0 ;
}
/* 菜单样式 */
.ik-list-title{
  background-color: #FFFFFF;
  color: #1482f0;
  margin-left: 25px;
  width: 300px;
  height: 42px;
  line-height: 42px;
  font-size: 14px;
}

.button{
  background-color: #1482f0;
  color: #FFFFFF;
  // border-radius:25px;
  margin-right: -1px;
}

.searcher{
  overflow: hidden!important;
}
.searcher .el-dialog__header{
  padding: 0px;
  display:none;
}

.searcher .el-dialog__body{
  padding: 0px;
  height: 100%;
}
</style>
